<!DOCTYPE html>
<html>
  <head>
    <title>我的博客图床</title>
    <meta charset="utf-8"></head>
    <style>
      *,
      div,
      p {
        border: 0;
        margin: 0;
        padding: 0;
      }
      .Container {
        width: 90vw;
        margin: 10px auto 0 auto;
        box-shadow: 5px;
      }
      .image-view {
        border: 3px dashed rgb(187, 185, 185);
      }
      .image {
        width: 400px;
        position: relative;
        margin: 10px;
        float: left;
      }
      .image-view img {
        width: 100%;
      }
      .image-title {
        width: 100%;
        text-align: center;
        font-size: 1rem;
        color: rgb(59, 142, 145);
      }
      .copy-btn {
        position: absolute;
        right: 3px;
        top: 3px;
        display: block;
        background: gray;
        font-size: 0.8rem;
        padding: 3px;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        box-shadow: 3px 3px 2px rgb(172, 172, 172);
      }
      .copy-btn:hover {
        background: rgb(53, 52, 52);
      }
    </style>
  </head>
  <body>
    <div class="Container">
      <div class="image">
        <div class="image-view">
          <img src="towaymerge_extend_1.png" />
        </div>
        <p class="image-title">towaymerge_extend_1</p>
        <span class="copy-btn">copy link</span>
      </div>
    </div>
    <script src="1.js"></script>
    <script>
      window.onload = function () {
        const baseURL = 'http://weizu_cool.gitee.io/gif-source/'
        var imgs = document.getElementsByClassName('image')
        var btns = document.getElementsByClassName('copy-btn')
        for (var i = 0; i < btns.length; i++) {
          btns[i].onclick = function () {
            var image = this.parentNode.getElementsByTagName('img')[0]
            var url = baseURL + image.getAttribute('src')

            var input = document.createElement('input')
            input.setAttribute('readonly', 'readonly')
            input.setAttribute('value', url)
            document.body.appendChild(input)
            input.select()
            var res = document.execCommand('copy')
              ? '复制链接成功！'
              : '复制链接失败！'
            document.body.removeChild(input)
            alert(res)
          }
        }
      }
    </script>
  </body>
</html>
